import React, { ReactNode, useState, ReactElement } from "react";

export interface notebookProps {
  title?: string;
}

function AddBtn(props: { onClick: () => void }) {
  return <button onClick={props.onClick}>添加</button>;
}

export default function NoteBook(props: notebookProps) {
  const arr = [1, 2, 3, 4, 5, 6, 7, 10];
  const listItems: ReactElement[] = [];
  for (let index = 0; index < arr.length; index++) {
    const each = arr[index];
    listItems.push(<li key={index}>{each}</li>);
  }
  const [list, setList] = useState(listItems);
  const [count, setCount] = useState(0);

  function add() {
    const wii = list[0];
    const random = Math.random().toString();
    const beAdd = <wii.type {...wii.props} key={random}>{random}</wii.type>;
    list.push(beAdd);
    console.log("add", beAdd);
    setList(list);
    setCount(count+1);
  }
  return (
    <div>
      <ul>{list}</ul>
      <label>click times {count}</label>
      <AddBtn onClick={add} />
    </div>
  );
}
